<template>
  <div class="menuMain">
      <div class="topicSelect">
        <div class="singleSelection">
        <p class="title">1.单选题</p>
        <div class="singleList">
            <span v-for="(el,i) in MultiSelection" :key =i @click.stop="addActive(i)" :class="el.active ?'active':''">{{i+1}}</span>
        </div>
      </div>
      <!-- <div class="MultiSelection">
        <p class="title">2.多选题</p>
        <div class="singleList">
            <span v-for="(el,i) in MultiSelection" :key =i @click.stop="addActive(i)" :class="el.active ?'active':''" >{{i+1}}</span>
        </div>
      </div> -->
      <!-- <div class="checkSelection">
        <p class="title">3.判断题</p>
        <div class="singleList">
            <span v-for="i in 20" :key =i >{{i+1}}</span>
        </div>
      </div> -->
    </div>
    <div class="fixedBtn">
        <span @click.stop=naviBack>继续练习</span>
         <span>提交试卷</span>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      activeIndex: -1,
      MultiSelection: []
    }
  },
  computed: {
    ...mapState({
      clickArray: state => state.examPaper.clickArray,
      device: state => state.device
    })
  },
  methods: {
    addActive (i) {
      this.MultiSelection[i].active = true
      console.log('../simulationTest/main?type=' + 'random' + '&id=' + this.$mp.query.examPaperId + '&defaultItem=' + i + '&lastQuestion=' + true)
      wx.reLaunch({
        url: '../simulationTest/main?type=' + 'random' + '&id=' + this.$mp.query.examPaperId + '&defaultItem=' + i + '&lastQuestion=' + true
      })
    },
    naviBack () {
      wx.navigateBack({
        delta: 1
      })
    }
  },
  mounted () {
    console.log(this.clickArray)
    this.MultiSelection = []
    console.log(this.clickArray)
    for (var i = 0; i < this.$mp.query.total; i++) {
      this.MultiSelection.push({
        active: false
      })
    }
    for (var j = 0; j < this.clickArray.length; j++) {
      this.MultiSelection[this.clickArray[j]].active = true
    }
  }

}
</script>
<style lang="stylus">
.menuMain{
  background #f7f7f7
}
.singleSelection,.MultiSelection,.checkSelection{
  padding 0 32rpx
  margin-bottom 20rpx
  background white
  .title{
    padding-top 20rpx
    font-size 32rpx
    color #333333
  }
}
.singleList{
    display -webkit-box
    display -webkit-flex
    display flex
    -webkit-box-align center
    -webkit-align-items center
    align-items center
    flex-wrap wrap

    padding-bottom 30rpx

  span{
    display inline-block
    width 60rpx
    height 60rpx
    border-radius 50%
    -webkit-border-radius 50%
    color #666666
    font-size 32rpx
    text-align center
    line-height 60rpx
    background #e6e6e6
    margin 20rpx
    &.active{
      background #00cc76
      color white
    }
  }
}
.topicSelect{
  padding-bottom 100rpx
}
.fixedBtn{
  position fixed
  bottom 0
  left 0
  width 100%
  text-align center
  height 88rpx
  border-top 1px solid #e6e6e6
  background white
  span{
    display inline-block
    margin-top 8rpx
    width 292rpx
    height 72rpx
    text-align center
    line-height 72rpx
    color #ffffff
    font-size 28rpx
    border-radius 12rpx
    -webkit-border-radius 12rpx
    background #00cc76
    &:nth-child(2){
      margin-left 38rpx
    }
  }
}
</style>
